<template>
    <div>
        <el-row>
            <el-col>
                <el-form :inline="true" :model="formInline">
                    <el-form-item>
                        <el-input size="mini" v-model="formInline.user" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select clearable size="mini" v-model="formInline.region" placeholder="请选择状态">
                            <el-option label="启用" value="shanghai"></el-option>
                            <el-option label="禁用" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row style="margin-bottom: 10px">
            <el-col>
                <el-button type="primary" size="mini" @click="dialogFormVisible = true">新增</el-button>
                <el-button type="primary" size="mini">发布</el-button>
                <el-button type="primary" size="mini">启/禁用</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-table
                        :data="tableData"
                        size="mini"
                        border
                        style="width: 100%">
                    <el-table-column
                            align="center"
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="name"
                            label="名称">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="user"
                            label="创建人">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="createTime"
                            label="创建时间">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="releaseTime"
                            label="发布时间">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="startTime"
                            label="开始日期">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="endTime"
                            label="截止日期">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="status"
                            label="状态">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            width="160px"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="dialogFormVisible = true">查看</el-button>
                            <el-button type="primary" size="mini" @click="dialogFormVisible = true">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        class="pagination"
                        background
                        layout="prev, pager, next"
                        :total="1">
                </el-pagination>
            </el-col>
        </el-row>
        <el-dialog title="培训计划" :visible.sync="dialogFormVisible">
            <el-row>
                <el-col>
                    <el-form :model="form" :label-width="formLabelWidth">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="计划名称">
                                    <el-input v-model="form.name" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="负责人">
                                    <el-input v-model="form.user" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="开始日期">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="截止日期">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date2" style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col>
                                <el-form-item label="培训内容">
                                    <el-input type="textarea" v-model="form.count" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col>
                                <el-form-item label="备注">
                                    <el-input type="textarea" v-model="form.textCount" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "trainPlan",
        data() {
            return {
                formInline: {},
                form: {},
                dialogFormVisible: false,
                formLabelWidth: "120px",
                tableData: [
                    {
                        name: "教学计划",
                        user: "admin",
                        createTime: "2020-11-18",
                        releaseTime: "2020-11-18",
                        startTime: "2020-11-18",
                        endTime: "2020-11-28",
                        status: "启用"
                    }
                ]
            }
        }
    }
</script>

<style scoped>

</style>
